﻿@model ArticleCreateViewModel

@{
    ViewData["Title"] = "Create";
}
@section Stylesheets {
    <link href="~/lib/zTree/css/zTreeStyle/zTreeStyle.css" rel="stylesheet" />
    <script src="~/lib/editor/kindeditor-all.js"></script>
    <link href="~/lib/Cropper/cropper.css" rel="stylesheet" />
    <script src="~/lib/Cropper/cropper.js"></script>

}

<hr />
<div class="row">
    <div class="col-md-12">
        <form asp-action="Create" id="form1">
            <div class="form-group form-row">
                <label class="col-1 text-right col-form-label" asp-for="CategoryID"></label>
                <div class="col-4"><span id="selectPan" class="form-control custom-select" style="cursor:default;background-color:#fff;">请选择分类</span></div>
                <input type="hidden" asp-for="CategoryID" />
                <span asp-validation-for="CategoryID" class="text-danger form-text"></span>
            </div>
            <div class="form-group form-row">
                <label class="col-1 text-right col-form-label" asp-for="Title"></label>
                <div class="col-4"><input type="text" class="form-control" asp-for="Title" /></div>
                <span asp-validation-for="Title" class="text-danger form-text"></span>
            </div>
            <div class="form-group form-row">
                <label class="col-1 text-right col-form-label" asp-for="Content"></label>
                <div class="col-11">
                    <textarea asp-for="Content" style="width:100%;">
                        默认内容 
                    </textarea>
                </div>
                <span asp-validation-for="Content" class="text-danger form-text"></span>
            </div>
            <div class="form-group form-row">
                <label class="col-1 text-right col-form-label" asp-for="Excerpt"></label>
                <div class="col-6">
                    <textarea rows="3" class="form-control" placeholder="选填，如果不填默认从正文抓取 @Model.Config.ArticleExcerptLength 个字符" asp-for="Excerpt"></textarea>
                </div>
                <span asp-validation-for="Excerpt" class="text-danger form-text"></span>
            </div>
            <div class="form-group form-row">
                <label class="col-1 text-right col-form-label" asp-for="CoverPath"></label>
                <div class="col-4">
                    <input type="text" class="form-control" readonly="readonly" asp-for="CoverPath" />
                </div>
                <button type="button" id="btn_ClearCoverPath"> 清除 </button>　<button type="button" id="btn_SelectCover"> 从图库中选择 </button>　<button type="button" id="btn_UpCover" class="btnCurImage" datacall="#CoverPath">上传图片</button>
                <span asp-validation-for="CoverPath" class="text-danger form-text"></span>
            </div>
            <div class="form-group form-row">
                <label class="col-1 text-right col-form-label" asp-for="CarouselPath"></label>
                <div class="col-4">
                    <input type="text" class="form-control" readonly="readonly" asp-for="CarouselPath" />
                </div>
                <button type="button" id="btn_ClearCarouselPath"> 清除 </button>　<button type="button" id="btn_SelectCarouse"> 从图库中选择 </button>　<button type="button" id="btn_UpCarouse" class="btnCurImage" datacall="#CarouselPath">上传图片</button>
                <span asp-validation-for="CarouselPath" class="text-danger form-text"></span>
            </div>
            <div class="form-group form-row">
                <label class="col-1 text-right col-form-label" asp-for="Auth"></label>
                <div class="col-4">
                    <input type="text" class="form-control" asp-for="Auth" />
                </div>
                <span asp-validation-for="Auth" class="text-danger form-text"></span>
            </div>
            <div class="form-group form-row">
                <label class="col-1 text-right col-form-label" asp-for="PublishTime"></label>
                <div class="col-4">
                    <input type="datetime-local" class="form-control" asp-for="PublishTime" />
                </div>
                <span asp-validation-for="PublishTime" class="text-danger form-text"></span>
            </div>
            <div class="form-group form-row">
                <label class="col-1 text-right col-form-label" >标签</label>
                <div class="col-7">
                    <div class="form-control" style="min-height:2.35rem;height:auto" id="tagContainer"></div>
                    <input type="hidden" id="tagList" name="tagList" />
                    <input type="hidden" id="tagIdList" name="tagIdList" />
                </div>
                <button type="button" class="" id="btn_SltTag" >选择标签</button>
            </div>
            <div class="form-group form-row">
                <label class="col-1 text-right col-form-label">发布状态</label>
                <div class="form-check form-check-inline ml-2">
                    <input type="checkbox" class="form-check-input" checked="checked" asp-for="isPublish" />
                    <label class="form-check-label" asp-for="isPublish"></label>
                </div>
                <div class="form-check form-check-inline">
                    <input type="checkbox" class="form-check-input" asp-for="isTop" />
                    <label class="form-check-label" asp-for="isTop"></label>
                </div>
            </div>
            <div class="form-group form-row">
                <label class="col-2 text-right col-form-label"></label>
                <div class="col-4 ">
                    <input type="submit" value="完成" class="btn btn-primary w-25" />

                </div>

            </div>
        </form>
    </div>
</div>
<div id="catetoryTree" class="ztree" style="position:absolute;display:none;  background-color:#fff; border:1px solid #c2c2c2;max-height:300px;overflow-y:scroll; overflow-x:auto;"></div>
@section Scripts {
    @{await Html.RenderPartialAsync("_ValidationScriptsPartial");}
    <script src="~/lib/layer/layer.js"></script>
    <script src="~/lib/zTree/js/jquery.ztree.all.js"></script>
    <script>

        $(document).ready(function () {
            var options = {
                filterMode: true,
                minHeight: 300,
                themeType: 'default',
                uploadJson:'@Model.Config.UpLoadPath',
                fileManagerJson: '@Model.Config.UpLoadFileManage',
                allowFileManager: true
            };
            var editor = KindEditor.create('#Content', options);
            KindEditor('#btn_SelectCover').click(function () {
                editor.loadPlugin('filemanager', function () {
                    editor.plugin.filemanagerDialog({
                        viewType: 'VIEW',
                        dirName: 'image',
                        clickFn: function (url, title) {
                            KindEditor('#CoverPath').val(url);
                            editor.hideDialog();
                        }
                    });
                });
            });
            KindEditor('#btn_SelectCarouse').click(function () {
                editor.loadPlugin('filemanager', function () {
                    editor.plugin.filemanagerDialog({
                        viewType: 'VIEW',
                        dirName: 'image',
                        clickFn: function (url, title) {
                            KindEditor('#CarouselPath').val(url);
                            editor.hideDialog();
                        }
                    });
                });
            });
            //提取编辑器中摘要
            KindEditor('#Excerpt').focus(function () {
                var tmpStr = editor.gettext().substring(0,@Model.Config.ArticleExcerptLength);
                tmpStr = tmpStr.replace(/\ +/g, "").replace(/[\r\n]/g, "");
                this.value = tmpStr;

            });
            var json =@Html.Raw(Model.TreeJson);
            zTreeObj = $.fn.zTree.init($("#catetoryTree"), {
                callback: {
                    beforeClick: function (treeId, treeNode, clickFlag) {
                        switch (treeNode.type) {
                            case 2://首页
                                return false;
                            case 4://分类

                                break;
                            case 8://单页

                                break;
                            case 16://链接
                                return false;
                            case 1://root
                                return false;
                        }
                        $('#CategoryID').val(treeNode.id);
                        var arr = new Array();
                        $(treeNode.getPath()).each(function (index, el) {
                            arr.push(el.name);
                        })
                        $('#selectPan').html(arr.join("<span style='color:red;font-weight:bold;'> › </span>"));
                        $('#catetoryTree').hide();
                        $("#form1").validate().element($("#CategoryID"));//对隐藏字段单独验证
                        return true;
                    }
                },
                view: {
                    autoCancelSelected: false,
                    selectedMulti: false
                }
            }, json);
            zTreeObj.expandAll(true);
            //清除轮播图片地址
            $("#btn_ClearCarouselPath").click(function () {
                $("#CarouselPath").val("");
            });

            $("#btn_SltTag").click(function () {
                layer.open({
                    type: 2,
                    btn: ['确定', '取消'],
                    area:["640px","360px"],
                    closeBtn: false,
                    resize: false,
                    title: false,
                    yes: function () {
                        $("#tagContainer").empty();
                        for (var i = 0; i < localStorage.length; i++) {
                            var t = $('<span class="badge badge-primary ml-2" style="cursor: default;" datatagid="' + localStorage.key(i) + '">' + localStorage.getItem(localStorage.key(i)) + '</span>').click(function () {
                                localStorage.removeItem($(this).attr('datatagid'));
                                $(this).remove();
                            })
                            $("#tagContainer").append(t);
                        }
                        layer.closeAll('iframe');
                    },
                    btn2: function () {
                        $("#tagContainer").empty();
                        localStorage.clear();
                    },
                    //area: ['420px', '240px'], //宽高
                    content: '/Manage/Tag/List?full=true'
                });
            })
            localStorage.clear();
            //清除封面图片地址
            $("#btn_ClearCoverPath").click(function () {
                $("#CoverPath").val("");
            })
            $("#CarouselPath,#CoverPath").focus(function () {
                if (this.value == "")
                    return;
                layer.open({
                    type: 1,
                    shadeClose: true,
                    closeBtn: false,
                    resize: false,
                    title: false,
                    //area: ['420px', '240px'], //宽高
                    content: '<img src="' + this.value + '" style="width:300px;" />'
                });
            });
            $("#selectPan").click(function () {//点击选择框显示Tree
                var cityOffset = $("#selectPan").offset();
                var height = $("#selectPan").outerHeight();
                var width = $("#selectPan").outerWidth();
                $("#catetoryTree").css({ left: cityOffset.left + "px", top: cityOffset.top + (height - 1) + "px", width: width + "px" });
                $("#catetoryTree").slideToggle("fast");
            });
            $('body').mousedown(function (event) {//页面点击事件，是否在tree或选择框，否则隐藏tree
                if (!(event.target.id == "catetoryTree" || event.target.id == "selectPan" || $(event.target).parents("#catetoryTree").length > 0)) {
                    $('#catetoryTree').hide();
                }
            })
            //解除对hidden的不验证设置，并重新绑定验证。
            $.validator.setDefaults({
                ignore: ''
            });
            $("form").removeData("validator").removeData("unobtrusiveValidation");
            $.validator.unobtrusive.parse($("form"));

            $("form").submit(function () {
                var tmpTagList = new Array();
                var tmpTagIdList = new Array();
                for (var i = 0; i < localStorage.length; i++) {
                    var tmpid = localStorage.key(i);
                    tmpTagIdList.push(tmpid);
                    tmpTagList.push(localStorage.getItem(tmpid));
                }
                $("#tagIdList").val(tmpTagIdList.toString());
                //获取摘要
                var excerpt = $('#Excerpt').val();
                if (excerpt.length < 1) {
                     var tmpStr = editor.gettext().substring(0,@Model.Config.ArticleExcerptLength);
                    tmpStr = tmpStr.replace(/\ +/g, "").replace(/[\r\n]/g, "");
                    $('#Excerpt').val(tmpStr);
                };
               

            })

            $(".btnCurImage").click(function () {           
                layer.open({//点击查看分类详情，layer弹窗组件打开弹窗显示详情页
                    type: 2,
                    area: ['750px', '580px'],
                    shadeClose: true,
                    closeBtn: false,
                    resize: false,
                    title: false,
                    content: ['/Manage/Home/UpImage/'],
                });
                LayerReturn.type = 1;
                LayerReturn.elemen = $($(this).attr('datacall'));
            })
        });
        //接收Layer返回数据
        var LayerReturn = {
            type: 0,
            elemen: '',
            run: function (value) {
                
                switch (this.type) {
                    case 1:
                        this.elemen.val(value); 
                        break;
                    case 2:
                        this.elemen.insertHtml(value);
                        break;
                }
            }
        }
    </script>
}
